<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" width="50%" destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main>
            <div class="printMain" ref="printMain" v-if="mode=='edit'">
                <div class="title">
                    <span style="color:#f00">{{detail.order_no}}</span>
                    <span>工艺单</span>
                </div>
                <div class="type">{{detail.goods_info}}</div>
                <div class="contont">
                    <img :src="detail.goods_image" style="width: 250px;height: 220px;margin: 0 5px;" />
                    <div class="hreder">
                        <div class="top">
                            <div class="detail">
                                <div class="detailName">工厂货号 : {{detail.factory_number}}</div>
                                <div class="detailName">SKC : {{detail.skc}}</div>
                                <div class="detailName">颜色 : {{detail.goods.colour}}</div>
                                <div class="detailName">工厂 : {{detail.referred_as}}</div>
                            </div>
                            <div class="detail" style="width:65%">
                                <div class="detailName">批次号 : {{detail.batch_number}}</div>
                                <div class="detailName">客户 : {{detail.custom_name}}</div>
                                <div class="detailName">成分 : {{detail.component_detail}}</div>
                                <div class="detailName">订单交期 : {{detail.deliver_time}} <span style="color:#f00" v-if="detail.order_label==1">(紧急)</span></div>
                            </div>
                        </div>
                        <div>修改评语 : <span class="comment" v-html="detail.comment"></span></div>
                        <div class='products' style="width: 100%;border: 1px solid #000;width: 100%;" v-if="mode != 'show'">
                            <div class='custom-table'>
                                <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;'>
                                    <div class='w-40 left' style="width:20%;text-align:center;display: flex;align-items: center;justify-content: center;border-right: 1px solid #000000;border-bottom: 1px solid #000000;"><span>尺码</span></div>
                                    <div class='w-40 left' style="width:60%;text-align:center;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #000000;">
                                        <div class='w-40 left' style="text-align:center;border-right: 1px solid #000000;width:100%" v-for="(item,index) in detail.orderDetail" :key="index"><span>{{item.goods_size}}</span></div>
                                    </div>
                                    <div class='w-40 left' style="width:20%;text-align:center;display: flex;align-items: center;justify-content: center;"><span>合计(件)</span></div>
                                </div>
                                <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;'>
                                    <div class='w-40 left' style="width:20%;text-align:center;display: flex;align-items: center;justify-content: center;border-right: 1px solid #000000;"><span>下单数量</span></div>
                                    <div class='w-40 left' style="width:60%;text-align:center;display: flex;align-items: center;justify-content: space-between">
                                        <div class='w-40 left' style="text-align:center;border-right: 1px solid #000000;width:100%" v-for="(item,index) in detail.orderDetail" :key="index"><span>{{item.num}}</span></div>
                                    </div>
                                    <div class='w-40 left' style="width:20%;text-align:center;display: flex;align-items: center;justify-content: center;"><span>{{detail.total_count}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div v-if="detail.size_image_text" v-html="detail.size_image_text" style="width:100%;margin-top:30px"></div> -->
                <div v-if="detail.goods.size_image_full_url" style="width:100%;">
                    <img :src="detail.goods.size_image_full_url" style="max-width:100%;height:auto;margin-top:30px">
                </div>
                <div v-else class='products' style="width: 100%;border-top: 1px solid #000;border-left: 1px solid #000;margin-top:30px">
                    <div class='custom-table'>
                        <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;' v-if="detail.location_data">
                            <div class='w-40 left sizeTable'><span>尺码</span></div>
                            <div class='w-40 left sizeTable'><span>尺寸纬度</span></div>
                            <div class='w-40 left sizeTable'><span>量法</span></div>
                            <div class='w-40 left' style="width:60%;text-align:center;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #000000;">
                                <div class='w-40 left' style="text-align:center;border-right: 1px solid #000000;width:100%" v-for="(item,index) in detail.dahuo_size" :key="index"><span 
                                >{{item.size_name}}</span></div>
                            </div>
                            <div class='w-40 left sizeTable'><span>样衣尺寸</span></div>
                            <div class='w-40 left sizeTable'><span>公差</span></div>
                            <div class='w-40 left sizeTable'><span>跳码</span></div>
                        </div>
                        <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;border-bottom: 1px solid #000000;' v-for="(item,index) in detail.location_data" :key="index">
                            <div class='w-40 left sizeTabSon'><span>{{item.location_name}}</span></div>
                            <div class='w-40 left sizeTabSon'><span>{{item.size_latitude}}</span></div>
                            <div class='w-40 left sizeTabSon'><span>{{item.measure_method}}</span></div>
                            <div class='w-40 left' style="width:60%;text-align:center;display: flex;align-items: center;justify-content: space-between">
                                <div class='w-40 left' style="border-right: 1px solid #000000;width:100%;height:100%;display: flex;align-items: center;justify-content: center" v-for="(item1,index1) in item.dahuo_size" :key="index1"><span>{{item1.size}}</span></div>
                            </div>
                            <div class='w-40 left sizeTabSon'><span>{{item.yangyi_size}}</span></div>
                            <div class='w-40 left sizeTabSon'><span>{{item.tolerance_range}}</span></div>
                            <div class='w-40 left sizeTabSon'><span>{{item.tiaoma}}</span></div>
                        </div>
                    </div>
                </div>
                <div style="margin-top:30px" >工序要求</div>
                <div class='products' style="width: 100%;border-top: 1px solid #000;border-left: 1px solid #000;">
                    <div class='custom-table'>
                        <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;'>
                            <div class='w-40 left sizeTable'><span>一级工序</span></div>
                            <div class='w-40 left sizeTable'><span>二级工序</span></div>
                            <div class='w-40 left process'><span>工序备注</span></div>
                        </div>
                        <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;' v-for="(item,index) in detail.process_data" :key="index">
                            <div class='w-40 left sizeTable'><span>{{item.process_name}}</span></div>
                            <div class='w-40 left sizeTable'><span>{{item.two_process_name}}</span></div>
                            <div class='w-40 left process'><span>{{item.remark}}</span></div>
                        </div>
                    </div>
                </div>
                <div style="width:100%;margin-top:30px" v-html="detail.custom_ask"></div>
            </div>
            <div class="printMain" ref="printMain" v-if="mode=='add'">
                <div v-for="(item,index) in template_data" :key="index">
                    <div v-if="index>=1" style="page-break-after: always;"></div>
                    <div class="title">
                        <span style="color:#f00">{{item.order_no}}</span>
                        <span>工艺单</span>
                    </div>
                    <div class="type">{{item.goods_info}}</div>
                    <div class="contont">
                        <img :src="item.goods_image" style="width: 250px;height: 220px;margin: 0 5px;" />
                        <div class="hreder">
                            <div class="top">
                                <div class="detail">
                                    <div class="detailName">工厂货号 : {{item.factory_number}}</div>
                                    <div class="detailName">SKC : {{item.skc}}</div>
                                    <div class="detailName">颜色 : {{item.goods.colour}}</div>
                                    <div class="detailName">工厂 : {{item.referred_as}}</div>
                                </div>
                                <div class="detail" style="width:70%">
                                    <div class="detailName">批次号 : {{item.batch_number}}</div>
                                    <div class="detailName">客户 : {{item.custom_name}}</div>
                                    <div class="detailName">成分 : {{item.component_detail}}</div>
                                    <div class="detailName">订单交期 : {{item.deliver_time}} <span style="color:#f00" v-if="item.order_label==1">(紧急)</span></div>
                                </div>
                            </div>
                            <div>修改评语 : <span class="comment" v-html="item.comment"></span></div>
                            <div class='products' style="width: 100%;border: 1px solid #000;width: 100%;" v-if="mode != 'show'">
                                <div class='custom-table'>
                                    <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;'>
                                        <div class='w-40 left' style="width:20%;text-align:center;display: flex;align-items: center;justify-content: center;border-right: 1px solid #000000;border-bottom: 1px solid #000000;"><span>尺码</span></div>
                                        <div class='w-40 left' style="width:60%;text-align:center;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #000000;">
                                            <div class='w-40 left' style="text-align:center;border-right: 1px solid #000000;width:100%" v-for="(item,index) in item.orderDetail" :key="index"><span>{{item.goods_size}}</span></div>
                                        </div>
                                        <div class='w-40 left' style="width:20%;text-align:center;display: flex;align-items: center;justify-content: center;"><span>合计(件)</span></div>
                                    </div>
                                    <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;'>
                                        <div class='w-40 left' style="width:20%;text-align:center;display: flex;align-items: center;justify-content: center;border-right: 1px solid #000000;"><span>下单数量</span></div>
                                        <div class='w-40 left' style="width:60%;text-align:center;display: flex;align-items: center;justify-content: space-between">
                                            <div class='w-40 left' style="text-align:center;border-right: 1px solid #000000;width:100%" v-for="(item,index) in item.orderDetail" :key="index"><span>{{item.num}}</span></div>
                                        </div>
                                        <div class='w-40 left' style="width:20%;text-align:center;display: flex;align-items: center;justify-content: center;"><span>{{item.total_count}}</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div v-if="item.size_image_text" v-html="item.size_image_text" style="width:100%;margin-top:30px"></div> -->
                    <div v-if="item.goods.size_image_full_url" style="width:100%;">
                        <img :src="item.goods.size_image_full_url" style="max-width:100%;height:auto;margin-top:30px">
                    </div>
                    <div v-else class='products' style="width: 100%;border-top: 1px solid #000;border-left: 1px solid #000;margin-top:30px">
                        <div class='custom-table'>
                            <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;' v-if="item.location_data">
                                <div class='w-40 left sizeTable'><span>尺码</span></div>
                                <div class='w-40 left sizeTable'><span>尺寸纬度</span></div>
                                <div class='w-40 left sizeTable'><span>量法</span></div>
                                <div class='w-40 left' style="width:60%;text-align:center;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #000000;">
                                    <div class='w-40 left' style="text-align:center;border-right: 1px solid #000000;width:100%" v-for="(item1,index1) in item.dahuo_size" :key="index1"><span 
                                    >{{item1.size_name}}</span></div>
                                </div>
                                <div class='w-40 left sizeTable'><span>样衣尺寸</span></div>
                                <div class='w-40 left sizeTable'><span>公差</span></div>
                                <div class='w-40 left sizeTable'><span>跳码</span></div>
                            </div>
                            <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;border-bottom: 1px solid #000000;' v-for="(item1,index1) in item.location_data" :key="index1">
                                <div class='w-40 left sizeTabSon'><span>{{item1.location_name}}</span></div>
                                <div class='w-40 left sizeTabSon'><span>{{item1.size_latitude}}</span></div>
                                <div class='w-40 left sizeTabSon'><span>{{item1.measure_method}}</span></div>
                                <div class='w-40 left' style="width:60%;text-align:center;display: flex;align-items: center;justify-content: space-between">
                                    <div class='w-40 left' style="border-right: 1px solid #000000;width:100%;height:100%;display: flex;align-items: center;justify-content: center" v-for="(item2,index2) in item1.dahuo_size" :key="index2"><span>{{item2.size}}</span></div>
                                </div>
                                <div class='w-40 left sizeTabSon'><span>{{item1.yangyi_size}}</span></div>
                                <div class='w-40 left sizeTabSon'><span>{{item1.tolerance_range}}</span></div>
                                <div class='w-40 left sizeTabSon'><span>{{item1.tiaoma}}</span></div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top:30px" >工序要求</div>
                    <div class='products' style="width: 100%;border-top: 1px solid #000;border-left: 1px solid #000;">
                        <div class='custom-table'>
                            <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;'>
                                <div class='w-40 left sizeTable'><span>一级工序</span></div>
                                <div class='w-40 left sizeTable'><span>二级工序</span></div>
                                <div class='w-40 left process'><span>工序备注</span></div>
                            </div>
                            <div class='custom-th' style='display:flex;justify-content:space-between;line-height: 32px;' v-for="(item1,index1) in item.process_data" :key="index1">
                                <div class='w-40 left sizeTable'><span>{{item1.process_name}}</span></div>
                                <div class='w-40 left sizeTable'><span>{{item1.two_process_name}}</span></div>
                                <div class='w-40 left process'><span>{{item1.remark}}</span></div>
                            </div>
                        </div>
                    </div>
                    <div style="width:100%;margin:30px 0" v-html="item.custom_ask"></div>
                </div>
            </div>
        </el-main>
    </el-dialog>
</template>

<script>
	import print from '@/utils/print'
	export default {
		name: 'print',
		data() {
			return {
                mode: "add",
				titleMap: {
					add: '打印工艺单',
					show: '打印',
					over: '退货'
				},
				visible: false,
				isSaveing: false,
                detail:{},
                template_data:[]
            }
		},
		methods: {
            //显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
            setData(data){
                if(this.mode=='edit'){
                    this.detail = data[0]
                }else if(this.mode=='add'){
                    this.template_data = data
                }
			},
			print(){
				//直接传入REF或者querySelector
				print(this.$refs.printMain)
                setTimeout(()=>{
                    this.visible = false
                },500)
			},
		}
	}
</script>

<style scoped lang="scss">
    div{
        color: #000;
    }
    .title{
        text-align: center;
        font-weight: 600;
        font-size: 32px;
        color: #000;
        padding: 30px 0 10px;
    }
    .type{
        text-align: center;
        font-size: 22px;
    }
    .contont{
        display: flex;
        margin-top: 10px;
        .hreder{
            margin-left: 10px;
            width: 100%;
            .top{
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                .detail{
                    line-height: 32px;
                }
            }
            .comment{
                margin-bottom: 20px;
                display: inline-block;
            }
        }
    }
    .sizeTable{
        width:20%;
        text-align:center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
    }
    .sizeTabSon{
        width:20%;
        text-align:center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #000000;
    }
    .process{
        width:60%;
        text-align:center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;

    }
    ::v-deep img{
        float: unset !important;
    }
</style>
